<template>
  <div id="container"></div>
</template>

<script setup>
import { onMounted } from "vue";
onMounted(() => {
  var map = new BMapGL.Map("container"); // 创建Map实例
  map.centerAndZoom("秦皇岛", 12); // 初始化地图,设置中心点坐标和地图级别
  map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放

  //     var cityControl = new BMapGL.CityListControl({
  //         anchor:11
  //   })
  var cityControl = new BMapGL.CityListControl({
    anchor: BMAP_ANCHOR_TOP_LEFT,
    // 控件的停靠位置(可选，默认左上角)anchor: BMAP_ANCHOR TOP LEFT// 控件基于停靠位置的偏移量(可选)
    offset: new BMapGL.Size(10, 5),
    // onChangeBefore() {
    //   alert("111");
    // },
    onChangeSuccess(e) {
      console.log(e);
    },
  });
  map.addControl(cityControl);
});
</script>

<style>
body,
html,
#app {
  width: 100%;
  height: 100%;
}
#container {
  overflow: hidden;
  width: 30%;
  height: 50%;
  margin: 0;
}
</style>
